// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

//   定义一个变量保存组装后的数据
let linkHtml = ''
let apiLink = document.querySelector('.api-link')
// console.log(apiLink);
apiTypeData.forEach(function (v) {
    // console.log(v.name);
    // 组装数据
    // 利用三目运算符判断字体是否加粗
    linkHtml += `
        <button class="${v.isnew ? 'active' : ''}" data-keyword="${v.keyword}">${v.name}</button>
      `
})
apiLink.innerHTML = linkHtml
// console.log(linkHtml);

/**
 *  需求 : 利用事件委派,给api-link注册点击事件,将当前事件源的文本
 * 渲染到 subtitle span中
 * 获取当前事件源的自定义属性keyword, 渲染给subtitle input
 * nodeName : 查找元素节点
 */
let span = document.querySelector('.subtitle span')
let input = document.querySelector('.subtitle input')
// console.log(input);
apiLink.addEventListener('click', function (e) {
    // console.log(e.target.nodeName);
    if (e.target.nodeName == 'BUTTON') {
        span.textContent = e.target.textContent
        input.placeholder = e.target.dataset.keyword
    }
})





// 申请数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

// 定义一个变量保存数据
let listHtml = ''
// 获取元素
let apiList = document.querySelector('.api-list')
listDataArr.forEach(function (v) {
    listHtml += `
    <li>
    <div class="box">
        <span class="${v.isSpecial ? 'block' : ''}">企业专用</span>
        <img src='../imgs/${v.img}'>
        <p>${v.name}</p>
        <p class="${v.price=='免费' ? 'li-p' : 'li-p1'}">${v.price}</p>
    </div>
    <button>申请数据</button>
</li>
    `
})

// 将数据渲染到apiList中
apiList.innerHTML = listHtml

// 点击申请数据显示mask
apiList.addEventListener('click',function(e){
    // console.log(e.target.nodeName);
    if(e.target.nodeName=='BUTTON'){
        mask.style.display = 'block'
    }else{
        location.href = '../page/API-details.html'
    }
})

let mask = document.querySelector('.mask')
let model = document.querySelector('.model')
console.log(model);


let userClose = document.querySelector('.userClose')
let userIn = document.querySelector('.icon input')
let pwdClose = document.querySelector('.pwdClose')
let pwdIn = document.querySelector('.icon2 input')

userIn.addEventListener('input', function () {
    if (userIn.value.length > 0) {
        userClose.style.display = 'block'
    } else {
        userClose.style.display = 'none'
    }
})

pwdIn.addEventListener('input', function () {
    if (pwdIn.value.length > 0) {
        pwdClose.style.display = 'block'
    } else {
        pwdClose.style.display = 'none'
    }
})

userClose.addEventListener('click', function () {
    userIn.value = ''
    userClose.style.display = 'none'
})

pwdClose.addEventListener('click', function () {
    pwdIn.value = ''
    pwdClose.style.display = 'none'
})
let user = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
let pwd = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
let btn = document.querySelector('.btn button')
let one = document.querySelector('.one')
let two = document.querySelector('.two')

// 注册userIn的失焦事件
userIn.addEventListener('blur',function(){
    if(!user.test(userIn.value)){
        one.textContent = '用户名不正确'
    }else{
        one.textContent = ''
    }
})

// 注册pwdIn失焦事件
pwdIn.addEventListener('blur',function(){
    if(!pwd.test(pwdIn.value)){
        two.textContent = '密码不正确'
    }else{
        two.textContent = ''
    }
})
// 注册点击按钮的点击事件
// 定义一个变量保存时间
let time = 3
btn.addEventListener('click', function (e) {
    e.stopPropagation()
    if (!user.test(userIn.value)) {
        one.textContent = '用户名不正确'
    } else if (!pwd.test(pwdIn.value)) {
       two.textContent = '密码不正确'
    } else {
        btn.textContent = `登录成功${time}秒后跳转`
        setInterval(function(){
            if(time==1){
                time=1
            }else{
                time--
                btn.textContent = `登录成功${time}秒后跳转`
            }
        }, 1000);
        setTimeout(function(){
            location.href = '../page/home.html'
        },3000);
    }
})

// 账号登录和扫码登录切换

let userLog = document.querySelector('#userLog')
let saoMa = document.querySelector('#saoMa')
let userOn = document.querySelector('.userOn')
let saoOn = document.querySelector('.saoOn')

userLog.addEventListener('click', function () {
    userLog.classList.add('model-active')
    saoMa.classList.remove('model-active')
    userOn.style.display = 'block'
    saoOn.style.display = 'none'
})

saoMa.addEventListener('click', function () {
    userLog.classList.remove('model-active')
    saoMa.classList.add('model-active')
    userOn.style.display = 'none'
    saoOn.style.display = 'block'
})

// 点击模态框不关闭mask,点击模态框外关闭mask


mask.addEventListener('click', function () {
    mask.style.display = 'none'
})

model.addEventListener('click', function (e) {
    // 阻止事件冒泡
    e.stopPropagation()
})